<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<head>
    <style type="text/css">
        .mechanics {

        }

        .automation {
            display: none;
        }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<!--装配零件信息模态框-->
<div class="modal fade" id="modal-make-choose">
    <div class="modal-dialog" style="width:1350px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">装配零件信息</h4>
            </div>
            <div class="modal-body">
                <form id="queryMake">
                    <div class="row">
                        <div class="form-inline">
                            <input type="hidden" name="prodNo" th:value="${asse.prodNo}">
                            <input type="hidden" name="special" th:value="${asse.special}">
                            <input type="hidden" name="part" th:value="${asse.part}">
                            <div class="form-group">
                                <label>图号</label>
                                <input type="text" name="drawNo"
                                       class="form-control"
                                       placeholder="请输入图号">
                            </div>
                            <div class="form-group">
                                <label>图名</label>
                                <input type="text" name="drawName"
                                       class="form-control"
                                       placeholder="请输入图名">
                            </div>
                            <button type="button" class="btn btn-success" id="btn_makeSearch">
                                <span class="Bold">搜索</span>
                            </button>
                            <button type="button" class="btn btn-info pull-right" id="btn_makeChoose">
                                <span class="Bold">确定</span>
                            </button>
                        </div>
                    </div>
                </form>
                <table id="bootstrap-one-choose-table"></table>
            </div>
        </div>
    </div>
</div>
<!--导入模态框-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import-plan">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a class="out" th:href="@{/file/装配外购件导入模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input id="import-file" class="btn" type="file" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-import" type="button" class="btn btn-success">
                    <span class="Bold">确定</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <!--<a id="btn-save" shiro:hasPermission="xxx" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px">
            <span class="Bold">打印</span>
        </a>-->
    </div>
    <form id="sheetForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-11" style="margin-left: 4%;">
                <input type="hidden" name="id" th:value="${asse.id}">
                <table class="t1">
                    <thead>
                    <tr>
                        <td colspan="9">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司66</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="2">装配派工单</td>
                        <td rowspan="4" style="width: 8.5%">
                            <div id="qrCode-div" style="display: none"></div>
                            <img id="qr-img" width="100px" height="100px">
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 6%">生产令号</td>
                        <td style="width: 11%">
                            [[${asse.prodNo}]]
                        </td>
                        <td style="width: 7.3%">项目名称</td>
                        <td colspan="2">
                            [[${asse.proName}]]
                        </td>
                        <td style="width: 6%">订单数量</td>
                        <td style="width: 7%">
                            [[${asse.proNum}]]
                        </td>
                        <td style="width: 9.1%">类型</td>
                        <td style="width: 6.9%">
                            [[${asse.special}]]
                        </td>
                        <td style="width: 7.9%">部分</td>
                        <td style="width: 9.8%">
                            [[${asse.part}]]
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">装配图号</td>
                        <td colspan="2" rowspan="2">
                            [[${asse.drawNo}]]
                        </td>
                        <td rowspan="2" style="width: 6%">装配名称</td>
                        <td colspan="3" rowspan="2">
                            [[${asse.drawName}]]
                        </td>
                        <td>装配数量</td>
                        <td>
                            [[${asse.drawNum}]]
                        </td>
                        <td rowspan="2">要求完成时间</td>
                        <td rowspan="2">
                            [[${asse.compTime}]]
                        </td>
                    </tr>
                    <tr>
                        <td>重量Kg</td>
                        <td>
                            [[${asse.drawWeight}]]
                        </td>
                    </tr>
                    <tr>
                        <td>部门</td>
                        <td colspan="11" style="text-align: left;padding-left: 10px;">
                            [[${asse.deptName}]]
                        </td>
                    </tr>
                    <tr>
                        <td>路线</td>
                        <td>序号</td>
                        <td>工序</td>
                        <td colspan="9">工艺内容</td>
                    </tr>
                    </thead>
                    <tbody id="card">
                    <tr th:each="d : ${details}" class="mechanics">
                        <td>
                            [[${d.route}]]
                        </td>
                        <td>
                            [[${d.orderNo}]]
                        </td>
                        <td>
                            [[${d.process}]]
                        </td>
                        <td colspan="9" style="text-align:left;padding-left: 5px;">
                            <div th:utext="${d.comment}"></div>
                        </td>
                    </tr>
                    <tr class="automation">
                        <td>注<br>意<br>事<br>项</td>
                        <td colspan="11" style="text-align:left;padding-left: 5px;height: 400px;">
                            <div th:utext="${asse.remark}"></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-11" style="font-size: 14px;line-height: 200%;margin-left: 4%;">
                <div class="col-xs-3" style="padding-left: 0">提报人： [[${asse.createName}]]&nbsp;&nbsp;[[${#dates.format(asse.createTime,'yyyy.MM.dd')}]]</div>
                <div class="col-xs-3 bottom form-inline">联系电话：[[${asse.createTel}]]</div>
            </div>
        </div>
    </form>
    <br>
    <hr>
    <div class="row">
        <div class="col-xs-12" style="margin-left: 4%;padding-right: 8.5%;">
            <form id="makeFormList" role="form" enctype="multipart/form-data">
                <h4 class="pull-right" style="margin-bottom: 10px;margin-right: 50%;">装配零件信息</h4>
                <input id="asseAssemblySheetId" name="asseAssemblySheetId" type="hidden" th:value="${asse.id}">
                <button shiro:hasPermission="asseOrd:make:edit" type="button" class="btn btn-info pull-left" id="btn-choose-one" style="margin-left: 4px;"> 选择</button>
                <button shiro:hasPermission="asseOrd:make:edit" type="button" class="btn btn-success pull-left" id="btn-save-one" style="margin-left: 4px;"> 保存</button>
                <div id="hot"></div>
            </form>
        </div>
    </div>
    <br>
    <hr>
    <div class="row">
        <div class="col-xs-12" style="margin-left: 4%;padding-right: 6%;">
            <h4 class="pull-right" style="margin-bottom: 10px;margin-right: 50%;">装配外购件信息</h4>
            <a shiro:hasPermission="asseOrd:buy:edit" href="javascript:void(0);"
               class="btn btn-info pull-left"
               onclick="js.modal.open('modal-import-plan')">
                <span class="Bold">数据导入</span>
            </a>
            <a id="btn-save" shiro:hasPermission="asseOrd:buy:edit" href="javascript:void(0);"
               class="btn btn-success pull-left" style="margin-left: 4px;">
                <span class="Bold">保存</span>
            </a>
            <form id="buyForm" class="form-horizontal">
                <input type="hidden" name="sheetId" th:value="${asse.id}">
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td style="width: 4%">序号</td>
                        <td style="width: 25%">物料名称</td>
                        <td style="width: 13%">跟踪号</td>
                        <td style="width: 7%">使用数量</td>
                        <td style="width: 5%">单位</td>
                        <td style="width: 10%">回货状态</td>
                        <td>存放位置</td>
                        <td>备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="out">
                    <tr th:each="d : ${buyList}">
                        <td th:text="${dStat.count}"></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" th:value="${d.matNameDesc}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" th:value="${d.trackCode}" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" th:value="${d.useNum}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" th:value="${d.unit}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" th:value="${d.backStatus}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" th:value="${d.position}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" th:value="${d.comment}" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    <tr th:if="${buyList.size()} eq 0">
                        <td>1</td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table1, table3;
    /**可编辑表单数据源*/
    var data = [];

    /** 计算表格序号 */
    function computerNo() {
        $("form#buyForm table tbody tr").each(function (i, e) {
            $(this).children("td:first").text(i + 1);
        });
    }

    /** 路线或注意事项显隐控制 */
    function setControlPage() {
        let specialCon = [[${asse.special}]];
        if (specialCon == "自动化") {
            $(".automation").show();
            $(".mechanics").hide();
        } else {
            $(".automation").hide();
            $(".mechanics").show();
        }
    }

    let gloDeptName = toUtf8([[${asse.prodNo}]] + '|' + [[${asse.drawNo}]] + '|' + [[${asse.partId}]] + '|2');

    $("#qrCode-div").qrcode({
        width: 80,
        height: 80,
        text: gloDeptName
    });

    /** 装配零件列表 */
    function loadMakeList() {
        js.post({
            url: ctx + "assemble/assMake/makePieceList",
            data: {asseAssemblySheetId: [[${asse.id}]]},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    for (var i = 0; i < result.data.rows.length; i++) {
                        data.push(result.data.rows[i]);
                    }
                    js.hot.loadData(result.data.rows);

                }
            }
        });
    }

    var process = function (data) {
        if ($("#asseAssemblySheetId").val() == "") {
            js.modal.warning("装配派工单主键为空，请刷新页面后再重新保存！");
            $("#asseAssemblySheetId").focus();
            return;
        }
        js.post({
            url: ctx + "assemble/assMake/saveMakeList",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    location.reload();
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        })
    }

    $(function () {

        /** 路线或注意事项显隐控制 */
        setControlPage();

        let c = document.getElementsByTagName('canvas')[0];
        $("#qr-img").attr("src", c.toDataURL("image/png"));

        // 装配零件列表
        loadMakeList();

        /**装配零件信息加载*/
        js.hot.init({
            element: document.getElementById('hot'),
            data: {},
            formData: ["asseAssemblySheetId"],
            colHeaders: ['ID',  '零件图号', '零件名称', '图纸类型', '使用数量', '质检意见', '保存时间',"半成品库ID","原数量"],
            fieldName: ['id',  'drawNo', 'drawName', 'drawType', 'useNum', 'comment', 'commitTime','asseHalfStoreId','oldUseNum'],
            height: 510,
            correctFormat: true,
            minSpareRows: 20,
            disableVisualSelection:'area',
            hiddenColumns: {
                columns: [0,7,8],
                indicators: true
            },
            callBack: process,
            saveButtonId: $("#btn-save-one"),
            columns: [
                {
                    data: 'id',
                    type: 'numeric',
                    width: 40
                },
                {
                    data: 'drawNo',//零件图号
                    type: 'text',
                    width: 150,
                    readOnly: true
                },
                {
                    data: 'drawName',//零件名称
                    type: 'text',
                    width: 200,
                    readOnly: true
                },
                {
                    data: 'drawType',//图纸类型
                    type: 'text',
                    width: 80,
                    readOnly: true
                },
                {
                    data: 'useNum',//使用数量
                    type: 'numeric',
                    width: 80
                },
                {
                    data: 'comment',//质检意见
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'commitTime',//保存时间
                    type: 'text',
                    width: 80,
                    readOnly: true
                },
                {
                    data: 'asseHalfStoreId',//半成品库ID（隐藏字段）
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'oldUseNum',//原数量（隐藏字段）
                    type: 'text',
                    readOnly: true
                }
            ]
        })

        /** 打开装配零件信息模态框 */
        $("#btn-choose-one").on('click', function () {
            js.modal.open("modal-make-choose")
            table3 = js.table.init({
                id: "bootstrap-one-choose-table",
                queryForm: "queryMake",
                showExport: false,
                pageSize: 100,
                url: ctx + "assemble/assMake/makeChooseList",
                columns: [
                    {
                        title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: '图号', field: 'drawNo'},
                    {title: '图名', field: 'drawName'},
                    {title: '库存数量', field: 'useNum'},
                    {title: '材质', field: 'quality'},
                    {title: '重量', field: 'weight'},
                    {title: '规格', field: 'spec'},
                    {title: '备注', field: 'comment'},
                    {title: '存放地点', field: 'storeAddr'},
                    {
                        field: "checked",
                        title: '全选',
                        checkbox: true
                    }
                ]
            })

        });
        /** 批量添加零件 */
        $("#btn_makeChoose").click(function () {
            var rows = js.table.selectRows("bootstrap-one-choose-table");
            // 如果没有选择，显示提示信息
            if (rows.length == 0) {
                js.modal.warning("请至少选择一条明细");
                return false;
            } else {
                // 将选中的每一行数据保存到一个数组中
                // 获取整个表格数据
                for (var i = 0; i < rows.length; i++) {
                    data.unshift(rows[i]);
                }
                let a = data.slice(0);
                js.hot.loadData(a);
                js.modal.hide("modal-make-choose");
            }
        });
        /** 关闭装配零件信息选择模态框 */
        js.modal.hideEvent("modal-make-choose", function () {
            js.table.destroy(table3);
        });

        /** 添加一行 */
        $("#buyForm").on('click', '.out-add', function () {
            $(this).parents("tr").after(`
                    <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
            computerNo();
        });
        /** 删除行 */
        $('#buyForm').on('click', '.out-del', function () {
            $(this).parents("tr").remove();
            if ($("form#buyForm table tbody tr").length === 0) {
                $("#out").append(`
                      <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                            `)
            }
            computerNo();
        });

        /** 导入 */
        $('#btn-import').click(function() {

            let files = $("#import-file")[0].files;
            let fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    let data = ev.target.result,
                        workbook = XLSX.read(data, {type: 'binary'}), // 以二进制流方式读取得到整份excel表格对象
                        plans = []; // 存储获取到的数据
                    // 遍历每张表读取
                    for (let sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            plans = plans.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                            break; // 只取第一张表
                        }
                    }
                    if (plans.length === 0) {
                        js.modal.alert("无法读取文件内容");
                    } else {
                        $("#out").empty();
                        /** 动态添加下拉列表的记录数*/
                        plans.forEach((value, index) => {
                            let a = value['使用数量'] || '';
                        if ($.isNumeric(a)){
                            a = Math.floor(a);
                        }
                        let b = value['备注'] || '';
                        let c = value['跟踪号'] || '';
                        let d = value['存放位置'] || '';
                        let m = value['回货状态'] || '';
                        $("#out").append(`
                    <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" value="${value['物料名称']}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" value="${c}" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" value="${a}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" value="${value['单位']}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" value="${m}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" value="${d}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" value="${b}" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                            `);
                    });
                        computerNo();
                        js.modal.hide("modal-import-plan");
                    }
                } catch (e) {
                    js.modal.alert("无法读取文件或文件类型有错误");
                }
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });
        /** 保存装配外购件信息 */
        $("#btn-save").click(function () {
            let $this = $(this);
            js.post({
                url: ctx + "verifyProStatus/isDesignByProCode",
                data: {proCode: $("#proCode").val()},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        let res = js.vd({
                            id: 'buyForm',
                            notEmpty: ['matNameDesc', 'useNum', 'unit', 'backStatus']
                        })
                        if (!res) {
                            return;
                        }
                        $this.attr('disabled', true);
                        js.submit({
                            formId: "buyForm",
                            url: ctx + 'assemble/assMake/saveBuy',
                            data: new FormData($("#buyForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    js.modal.success(result.msg);
                                    window.location.reload();
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    } else {
                        let res = js.vd({
                            id: 'buyForm',
                            notEmpty: ['matNameDesc', 'useNum', 'unit', 'backStatus']
                        })
                        if (!res) {
                            return;
                        }
                        $this.attr('disabled', true);
                        js.submit({
                            formId: "buyForm",
                            url: ctx + 'assemble/assMake/saveBuy',
                            data: new FormData($("#buyForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    js.modal.success(result.msg);
                                    window.location.reload();
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    }
                }
            });




        });

    })

</script>
</body>
</html>
